<script setup lang="ts">
import { inject } from 'vue'
import { useStore } from '@store/index'
import { PageInfo, UserDto, popMessage, popMessageKey } from '@/type'
import { follow, unFollow } from '@utils/api';
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore()
const popMessage = inject(popMessageKey) as popMessage
// 获取 BASEURL
const BASEURL = store.getBaseUrl()

const props = defineProps<{
    pageInfo: PageInfo<UserDto>
}>()

const followUser = (userId: string, index: number) => {
    follow(userId).then(res => {
        if (res.data.code === 1) {
            props.pageInfo.list[index].followed = true
            props.pageInfo.list[index].fans++
            popMessage('关注成功', 'success')
        } else {
            popMessage(res.data.msg, 'error')
        }
    })
}

const unfollowUser = (userId: string, index: number) => {
    unFollow(userId).then(res => {
        if (res.data.code === 1) {
            props.pageInfo.list[index].followed = false
            props.pageInfo.list[index].fans--
            popMessage('取消关注成功', 'success')
        } else {
            popMessage(res.data.msg, 'error')
        }
    })
}


</script>

<template>
    <ul class="user-list">
        <li v-for="item, index in pageInfo.list" :class="{ alternating: index % 2 !== 0 }">
            <div class="user-left">
                <img @click="router.push('/personCenter/' + item.id + '/false')" class="image" :src="BASEURL + '/static/image/' + item.avatar" alt="">
                <div class="user-info">
                    <span @click="router.push('/personCenter/' + item.id + '/false')">{{ item.name }}</span>
                    <div>{{ item.introduce.length > 30 ? item.introduce.slice(0, 30) + '...' : item.introduce }}</div>
                </div>
            </div>

            <div class="user-right">
                <button @click="followUser(item.id, index)" v-if="!item.followed" class="fllow">
                    <img src="../../assets/add-C20C0C.svg" alt="">
                    关注
                </button>
                <button @click="unfollowUser(item.id, index)" v-if="item.followed" class="fllowed">
                    <img src="../../assets/sub.svg" alt="">
                    取关
                </button>
                <div class="collectCount">歌单：{{ item.musicListCount }}</div>
                <div class="playCount">粉丝：{{ item.fans }}</div>
            </div>
        </li>

    </ul>
</template>

<style scoped lang="css">
.user-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 0;

}

.user-list li {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* margin-bottom: 2px; */
    /* padding-left: 32px; */
    /* padding-bottom: 30px; */
    /* box-sizing: border-box; */
}

.alternating {
    background-color: #fbfbfb;
}

.user-list li:hover {
    /* margin: -1px; */
    /* border: 1px solid #ccc; */
    /* box-sizing: border-box; */
    box-shadow: 0 0 10px #ccc;
    background-color: #F2F2F2;

}

.user-left {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

li .user-left .play {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 0 20px;
}

li .user-left .image {
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin: 0 20px;
}

.user-info {
    display: block;
    font-size: 12px;
    /* width: 100%; */
}

.user-info span {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}

.user-info div {
    color: #999;
}

.fllow,
.fllowed {
    cursor: pointer;
    width: 70px;
    height: 30px;
    display: flex;
    align-items: center;
    margin-right: 40px;
    font-size: 12px;
    border: 1px solid #D3D3D3;
    border-radius: 6px;
    background-image: linear-gradient(to bottom, #fff, #F6F6F6);
}

.fllow:hover,
.fllowed:hover {
    filter: brightness(1.02);

}

.fllow img,
.fllowed img {
    width: 20px;
    height: 20px;
}

.user-info span:hover {
    cursor: pointer;
    text-decoration-line: underline;

}

.user-right {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
}

.user-right div {
    margin-right: 10px;
}

.user-right .collectCount,
.user-right .playCount {
    width: 90px;
}
</style>